import { GroupProps } from '@react-three/fiber';
import React, { useEffect, useState } from 'react';
import * as THREE from 'three';

const Cloud = (props: GroupProps) => {
  const [blocks, setBlocks] = useState<React.ReactNode[]>([]);

  useEffect(() => {
    const geometry = new THREE.DodecahedronGeometry(20, 0);
    const material = new THREE.MeshPhongMaterial({
      color: 0xd8d0d1,
    });
    const blocks: React.ReactNode[] = [];
    const nBlocs = 3 + Math.floor(Math.random() * 3);
    for (let i = 0; i < nBlocs; i++) {
      blocks.push(
        <mesh
          key={i}
          position={[i * 15, Math.random() * 10, Math.random() * 10]}
          rotation={[0, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2]}
          scale={0.1 + Math.random() * 0.9}
          geometry={geometry}
          material={material}
        />,
      );
    }
    setBlocks(blocks);
  }, []);

  return <group {...props}>{blocks}</group>;
};

export default Cloud;
